<html>
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <title>比特弹幕发射器</title>
    <style>
    #body {
      background-color:000;
    }
    #app input {
      display:block;
      width:90%;
      height: 60px;
      font-size:40px;
      margin:5px auto;
    }
    #app button {
      display:block;
      width:90%;
      margin:0 auto;
    }
    </style>
  </head>
  <body>
    <div id="app">
      <input type="text" v-model="msg"></input>
      <button type="button" class="btn btn-success" v-on:click="send()" v-bind:disabled="msg==''">发送弹幕</button>
    </div>
  </body>
	<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  <script>
    var vm = new Vue({
      el: "#app",
      data: {
        msg:"",
        result:"",
      }
    })
    
    function send() {
      // 此处的 {{session_id}} 是服务端替换的
      $.post("/putmsg/{{session_id}}", {
        msg: vm.msg
      }, function(data, status) {
        // alert("server response:" + data + "\nhttp status:" + status)
        alert(data)
        vm.msg = ""
      })
    }
  </script>
</html>
